<template>
  <div id="HomeChannelManage">
    <van-popup v-model:show="popupShow" class="popupStyle">
      <nav-bar title="频道管理">
        <template #right>
          <van-icon name="cross" @click="popupShow = false" />
        </template>
      </nav-bar>
      <div class="overlayContent">
        <div class="channelBox" :class="{ 'animation': editMode }">
          <div class="titleWrap">
            <div class="title">
              已添加频道:
              <div class="subTitle">点击{{ editMode ? '移除' : '进入' }}频道</div>
            </div>
            <div class="editBtn" @click="editMode = !editMode">{{ editMode ? '完成' : '编辑' }}</div>
          </div>
          <van-row>
            <van-col :span="6" :key="item.id" v-for="item in userChannels">
              <div class="channels" @click="handleRemoveChannel(item)">
                {{ item.name }}
                <van-icon name="cross" color="#999" v-if="editMode & item.id !== 0" />
              </div>
            </van-col>
          </van-row>
        </div>

        <van-divider />

        <div class="moreBox">
          <div class="titleWrap">
            <div class="title">
              可添加频道:
              <div class="subTitle">点击添加频道</div>
            </div>
          </div>
          <van-row>
            <van-col :span="6" v-for="item in moreChannels" :key="item.id">
              <div class="channels" @click="handleEditChannel(item)">{{ item.name }}</div>
            </van-col>
          </van-row>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script  setup>
import { Icon as vanIcon, NavBar, popup as vanPopup, Row as vanRow, Col as vanCol, Divider as vanDivider, Toast } from 'vant'
import { defineExpose, ref, watchEffect } from 'vue'
import { useStore } from 'vuex'
import { deleteUserChannels } from '@/api'
const store = useStore()
const popupShow = ref(false)

// 向外暴露变量
defineExpose({
  popupShow
})
const editMode = ref(false)
// 监听频道列表的变化并赋值
const userChannels = ref([])
const moreChannels = ref([])
watchEffect(() => {
  userChannels.value = store.state.channel.userChannel
  moreChannels.value = store.getters.moreChannel
  if (!popupShow.value) {
    editMode.value = false
  }
})

// 添加频道
const handleEditChannel = async (data) => {
  // 深度克隆userChannels
  const userChannelsClone = JSON.parse(JSON.stringify(userChannels.value))
  const dataCopy = Object.assign({}, data)
  userChannelsClone.forEach(element => {
    delete element.name
    element.seq = element.id
  })
  userChannelsClone.push(dataCopy)
  userChannelsClone.forEach((item, index) => {
    delete item.name
    item.seq = index
  })
  Toast.loading({
    message: '加载中...',
    forbidClick: true
  })
  await store.dispatch('uploadChannel', userChannelsClone)
  Toast.clear()
}
// 移除频道
const handleRemoveChannel = async ({ id, name }) => {
  if (editMode.value) {
    Toast.loading({
      message: '加载中...',
      forbidClick: true
    })
    await deleteUserChannels(id)
    await store.dispatch('getChannel')
    Toast.clear()
  } else {
    popupShow.value = false
    store.state.channel.activeId = name
  }
}

</script>

<style lang='less'>
@keyframes editAnimation {
  25% {
    transform: rotate(-5deg);
  }
  50% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.popupStyle {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  .overlayContent {
    flex: 1;
    display: flex;
    padding: 10px;
    flex-direction: column;
    background-color: #fff;
    .channelBox.animation {
      .channels {
        animation: editAnimation 0.3s linear infinite;
        -webkit-animation: editAnimation 0.3s linear infinite;
      }
    }
    .channelBox,
    .moreBox {
      .titleWrap {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 5px;

        .title {
          font-size: 14px;
          line-height: 14px;
          font-weight: 700;
          .subTitle {
            padding-left: 5px;
            float: right;
            font-size: 12px;
            color: #999;
          }
        }
        .editBtn {
          font-size: 12px;
          padding: 3px 8px;
          border: 1px solid #999;
          border-radius: 5px;
        }
      }
      .channels {
        position: relative;
        font-size: 12px;
        line-height: 36px;
        background-color: rgba(0, 0, 0, 0.03);
        margin: 6px;
        text-align: center;
        border-radius: 5px;

        .van-icon {
          position: absolute;
          top: 2px;
          right: 2px;
        }
      }
    }
  }
}
</style>
